"use client";

// 将颜色代码转换为CSS兼容的格式
import { colorToCss } from "@/lib/utils";
// 使用自定义钩子来获取其他用户的连接ID和映射信息
import { useOthersConnectionIds, useOthersMapped } from "@/liveblocks.config";
// 使用Liveblocks库中的shallow比较工具
import { shallow } from "@liveblocks/client";
// 使用React的memo高阶组件来优化性能
import { memo } from "react";
// 导入光标组件
import { Cursor } from "./cursor";
// 导入绘图路径组件
import { Path } from "./path";

// 渲染多个用户光标
const Cursors = () => {
  // 获取其他用户的连接ID
  const ids = useOthersConnectionIds();

  // 为每个连接ID渲染一个光标组件
  return (
    <>
      {ids.map((id) => (
        <Cursor key={id} connectionId={id} />
      ))}
    </>
  );
};

// 渲染当前用户绘制的草稿
const Draft = () => {
  // 使用useOthersMapped钩子获取其他用户的映射信息，只关注铅笔草稿和颜色
  const others = useOthersMapped(
    (other) => ({
      pencilDraft: other.presence.pencilDraft,
      pencilColor: other.presence.pencilColor,
    }),
    shallow
  );

  // 渲染每个用户的绘图路径
  return (
    <>
      {others.map(([key, other]) => {
        if (other.pencilDraft) {
          return (
            <Path
              key={key}
              x={0}
              y={0}
              points={other.pencilDraft}
              fill={other.pencilColor ? colorToCss(other.pencilColor) : "#000"}
            />
          );
        }
        return null;
      })}
    </>
  );
};

// 合并草稿和光标组件，优化性能
export const CursorPresence = memo(() => {
  // 渲染草稿和光标组件
  return (
    <>
      <Draft />
      <Cursors />
    </>
  );
});

// 设置组件的显示名称，便于调试和识别
CursorPresence.displayName = "CursorPresence";